import React, { useEffect, useRef } from 'react';
import { Chart } from '@antv/g2';

interface EnergyDistData {
  amout: number
  deviceName: string
  ratio: number
}

interface EnergyDistributionChartProps {
  deviceConsumptionRatio: any
}
const data = [
  { item: '事例一', count: 40, percent: 0.4 },
  { item: '事例二', count: 21, percent: 0.21 },
  { item: '事例三', count: 17, percent: 0.17 },
  { item: '事例四', count: 13, percent: 0.13 },
  { item: '事例五', count: 9, percent: 0.09 },
];

const EnergyDistributionChart: React.FC<EnergyDistributionChartProps> = ({ deviceConsumptionRatio = [] }) => {
  const data = deviceConsumptionRatio?.map((item: any) => ({
    item: item.deviceName,
    count: item.amout,
    percent: item.ratio
  }))

  const containerRef = useRef<HTMLDivElement>(null);
  const chartRef = useRef<Chart | null>(null);

  useEffect(() => {
    if (deviceConsumptionRatio?.length == 0) return
    const renderChart = () => {
      if (containerRef.current) {
        if (chartRef.current) {
          chartRef.current.destroy();
        }

        const chart = new Chart({
          container: containerRef.current,
          autoFit: true,
          theme: 'dark',
          // paddingRight: 120,
        });
        chart.coordinate({ type: 'theta', outerRadius: 0.8 });

        chart
          .interval()
          .data(data)
          .transform({ type: 'stackY' })
          .encode('y', 'percent')
          .encode('color', 'item')
          .legend('color', { position: 'bottom', layout: { justifyContent: 'center' } })
          .label({
            position: 'outside',
            text: (data) => `${data.item}: ${data.percent * 100}%`,
          })
          .tooltip((data) => ({
            name: data.item,
            value: `${data.percent * 100}%`,
          }));


        // chart
        //   .interval()
        //   .data(deviceConsumptionRatio)
        //   .transform({ type: 'stackY' })
        //   .coordinate({ type: 'theta', innerRadius: 0.6 })
        //   .encode('y', 'amout')
        //   .encode('x', 'deviceName')
        //   .style('stroke', '#122744')
        //   .style('lineWidth', 2)
        //   .animate('enter', { type: 'waveIn' })
        //   .label({
        //     text: (d: EnergyDistData) => `${d.deviceName}\n${d.ratio}`,
        //     position: 'outside',
        //     style: {
        //       fill: 'rgba(255, 255, 255, 0.85)',
        //       fontSize: 12,
        //       textAlign: 'center',
        //       textBaseline: 'middle',
        //       lineHeight: 1.5,
        //     },
        //     transform: [{ type: 'overlapDodgeY' }],
        //   });

        chart.legend({
          color: {
            position: 'right',
            title: false,
            itemNameFill: '#fff',
            maxWidth: 120,
            itemSpacing: 8,
            itemStates: {
              active: {
                nameStyle: {
                  fill: '#fff',
                  fontWeight: 500,
                },
              },
              inactive: {
                nameStyle: {
                  fill: 'rgba(255, 255, 255, 0.65)',
                },
              },
            },
          },
        });

        // chart.interaction('tooltip', {
        //   shared: true,
        //   crosshairs: false,
        // });

        // chart.theme({
        //   type: 'dark',
        //   palette: {
        //     semanticColors: {
        //       series: ['#1890ff', '#52c41a', '#faad14', '#f5222d'].map(color => ({
        //         fill: color,
        //         stroke: color,
        //       })),
        //     },
        //   },
        //   background: 'transparent',
        // });

        chart.render();
        chartRef.current = chart;
      }
    };

    renderChart();

    const resizeObserver = new ResizeObserver(() => {
      renderChart();
    });

    if (containerRef.current) {
      resizeObserver.observe(containerRef.current);
    }

    return () => {
      resizeObserver.disconnect();
      if (chartRef.current) {
        chartRef.current.destroy();
      }
    };
  }, [deviceConsumptionRatio]);

  return <div ref={containerRef} className="chart-container" />;
};

export default EnergyDistributionChart;
